<header class="header">
  <amp-img alt="{{ .Site.Title }}"
    width="128px"
    height="128px"
    class="logo"
    src="{{ .Site.Params.Logo }}"
    sizes="(max-width: 800px) 36px, 128px">
  </amp-img>
  {{  if eq .Kind "home" }}
    <h1 class="title"><a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">{{ .Site.Title }}</a></h1>
  {{ else }}
    <h2 class="title"><a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">{{ .Site.Title }}</a></h2>
  {{ end }}
  <p class="subtitle">{{ .Site.Params.subtitle }}</p>
  <button class="menu-toggle" type="button" on="tap:sidebar.open">
    <svg class="icon icon-menu" fill="currentColor"><use xlink:href="#icon-menu" /></svg>
  </button>

  <!-- Sidebar is header on desktop -->
  <nav class="menu">
    <ul class="menu-list">
      {{ partial "navigation.html" . }}
    </ul>
  </nav>

  <button on="tap:AMP.setState({darkMode: !darkMode})">
    <svg class="icon moon" fill="currentColor"><use xlink:href="#icon-moon" /></svg>
    <svg class="icon sunny" fill="currentColor"><use xlink:href="#icon-sunny" /></svg>
  </button>

  {{ partial "social.html" . }}
</header>
